<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>水雨情 | 上饶防旱抗汛系统</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 我们提供了CDN地址可以直接使用，并且强烈建议使用我们的CDN而不是下载到本地-->
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <!-- local
    <link rel="stylesheet" href="../static/mui/sm.min.css">
    <link rel="stylesheet" href="../static/mui/sm-extend.css">-->
    <link rel="stylesheet" href="./static/hswx.css">

</head>
<body>
<div class="page">
    <header class="bar bar-nav">
        <h1 class='title' style="font-weight: bold;">上饶市防汛抗旱汛情综述</h1>
    </header>
    <div class="content">
        <div class="buttons-tab">
            <a href="#xqzs_tab" class="tab-link active button">汛情综述</a>
            <a href="#syq_tab" class="tab-link button">水雨情</a>
        </div>
        <div class="tabs">
            <!-- 汛情综述 -->
            <div id="xqzs_tab" class="tab active">
                <div class="bar-nav content-block-title" style="margin: 0.5rem 0 0 0;height: 2rem;background-color: #0a8ddf;">
                    <button class="button button-link button-nav pull-right" style="color: #2ac845;border: 0;padding: 0.5rem;">
                        已订阅<span class="icon icon-right"></span>
                    </button>
                    <h2 class="title" style="color: #fff;">雨情信息</h2>
                </div>
                <div class="list-block" style="margin: 0 0 1rem 0;">
                    <ul>
                        <li>
                            <!-- 雨情信息 list -->
                            <table class="list-block" style="padding-left: 0;width: 100%;text-align: center;margin: 0;">
                                <tr class="item-inner row">
                                    <th class="col-50">行政区划</th>
                                    <th class="col-50">累计雨量(mm)</th>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列1</td>
                                    <td class="col-50">雨1</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列2</td>
                                    <td class="col-50">雨2</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列3</td>
                                    <td class="col-50">雨3</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列4</td>
                                    <td class="col-50">雨4</td>
                                </tr>
                                <tr class="item-inner row" style="display: none">
                                    <td class="col-50">列5</td>
                                    <td class="col-50">雨5</td>
                                </tr>
                                <tr class="item-inner row" style="display: none">
                                    <td class="col-50">列7</td>
                                    <td class="col-50">雨7</td>
                                </tr>
                            </table>
                        </li>
                    </ul>
                </div>

                <div class="content-block-title" style="margin: 0.5rem 0 0 0;height: 2rem;background-color: #0a8ddf;">
                    <button class="button button-link button-nav pull-right" style="color: #2ac845;border: 0;padding: 0.5rem;">
                        已订阅<span class="icon icon-right"></span>
                    </button>
                    <h2 class="title" style="color: #fff;">水库水情</h2>
                </div>
                <div class="list-block" style="margin: 0 0 1rem 0;">
                    <ul>
                        <li>
                            <!-- 水库水情 list -->
                            <table class="list-block" style="margin: 0;padding-left: 0;width: 100%;text-align: center;">
                                <tr class="item-inner row">
                                    <th class="col-50">水库名称</th>
                                    <th class="col-50">超汛线(米)</th>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列1</td>
                                    <td class="col-50">雨1</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列2</td>
                                    <td class="col-50">雨2</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列3</td>
                                    <td class="col-50">雨3</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列4</td>
                                    <td class="col-50">雨4</td>
                                </tr>
                                <tr class="item-inner row">
                                    <td class="col-50">列5</td>
                                    <td class="col-50">雨5</td>
                                </tr>
                            </table>
                        </li>
                    </ul>
                </div>

                <div class="content-block-title" style="margin: 0.5rem 0 0 0;height: 2rem;background-color: #0a8ddf;">
                    <button class="button button-link button-nav pull-right" style="color: #2ac845;border: 0;padding: 0.5rem;">
                        已订阅<span class="icon icon-right"></span>
                    </button>
                    <h2 class="title" style="color: #fff;">河道水情</h2>
                </div>
                <div class="list-block" style="margin: 0 0 1rem 0;">
                    <ul>
                        <li>
                            <!-- 河道水情 list -->
                            <table class="list-block" style="margin: 0;padding-left: 0;width: 100%;text-align: center;">
                                <tr>
                                    <span row="3">从服务器端接收数据并显示从服务器端接收数据并显示从服务器端接收数据并显示从服务器端接收数据并显示从服务器端接收数据并显示</span>
                                </tr>
                            </table>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 水雨情 -->
            <div id="syq_tab" class="tab">
                <div class="content-block">
                    <div id="syqcont" class="content">
                        <div class="buttons-tab">
                            <a href="#yq" class="tab-link active button">雨情</a>
                            <a href="#sk" class="tab-link button">水库</a>
                        </div>
                        <div class="content-block" style="margin: 0;padding: 0;">
                            <div class="tabs">
                                <div id="yq" class="tab active">
                                    <div class="content-block" style="margin: 0;padding: 0;">
                                        <div class="list-block" style="margin: 0 0 1rem 0;">
                                            <ul>
                                                <li>
                                                    <!-- 雨情 list -->
                                                    <table class="list-block" style="margin: 0;padding-left: 0;width: 100%;text-align: center;">
                                                        <tr class="item-inner row">
                                                            <th class="col-25">测站名称</th>
                                                            <th class="col-25">行政区划</th>
                                                            <th class="col-25">累计雨量(mm)</th>
                                                            <th class="col-25">订阅</th>
                                                        </tr>
                                                        <tr class="item-inner row">
                                                            <td class="col-25">列1</td>
                                                            <td class="col-25">雨1</td>
                                                            <td class="col-25">列1</td>
                                                            <td class="col-25">雨1</td>
                                                        </tr>
                                                        <tr class="item-inner row">
                                                            <td class="col-25">列2</td>
                                                            <td class="col-25">雨2</td>
                                                            <td class="col-25">列2</td>
                                                            <td class="col-25">雨2</td>
                                                        </tr>
                                                    </table>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div id="sk" class="tab">
                                    <div class="content-block" style="margin: 0;padding: 0;">
                                        <div class="list-block" style="margin: 0 0 1rem 0;">
                                        <ul>
                                            <li>
                                                <!-- 水库 list -->
                                                <table class="list-block" style="margin: 0;padding-left: 0;width: 100%;text-align: center;">
                                                    <tr class="item-inner row">
                                                        <th class="col-20">测站名称</th>
                                                        <th class="col-20">超汛线(米)</th>
                                                        <th class="col-20">主汛</th>
                                                        <th class="col-20">后汛</th>
                                                        <th class="col-20">订阅</th>
                                                    </tr>
                                                    <tr class="item-inner row">
                                                        <td class="col-20">列1</td>
                                                        <td class="col-20">雨1</td>
                                                        <td class="col-20">列1</td>
                                                        <td class="col-20">雨1</td>
                                                        <td class="col-20">雨1</td>
                                                    </tr>
                                                    <tr class="item-inner row">
                                                        <td class="col-20">列2</td>
                                                        <td class="col-20">雨2</td>
                                                        <td class="col-20">列2</td>
                                                        <td class="col-20">雨2</td>
                                                        <td class="col-20">雨2</td>
                                                    </tr>
                                                    <tr class="item-inner row">
                                                        <td class="col-20">列3</td>
                                                        <td class="col-20">雨3</td>
                                                        <td class="col-20">列3</td>
                                                        <td class="col-20">雨3</td>
                                                        <td class="col-20">雨3</td>
                                                    </tr>
                                                </table>
                                            </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 地图 -->
        </div>
    </div>
</div>

<!-- SUI -->
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<!-- local
<script type='text/javascript' src='../static/mui/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='../static/mui/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../static/mui/sm-extend.js' charset='utf-8'></script>-->

</body>
</html>

<script>
    window.onload=function () {
        var mapwidth = document.getElementsByClassName('buttons-tab')[0].offsetHeight;
        document.getElementById('syqcont').style.top = mapwidth+10+'px';
    }
</script>
